<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0" />
    <title>奖品概率详情</title>
    <#include "/view/admin/head.html"/>

    <script type="text/javascript" src="${base}/jstool/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="${base}/jstool/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/jstool/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript" src="${base}/jstool/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="${base}/jstool/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/jstool/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript" src="${base}/jstool/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="${base}/jstool/bootstrap-select/lang/defaults-zh_CN.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/jstool/bootstrap-select/css/bootstrap-select.min.css" />

    <style type="text/css">
        .list-path{
            height: 50px;
            line-height: 50px;
            background-color: #9acfea;

        }
        .table-class{
            width:80%;
            text-align: center;
            border:1px solid #afd9ee;
            margin:0 auto;
            margin-top: 50px;
        }
        table th{
            width:20%;
            background-color: #d9edf7;
            text-align: right;
        }
        table td{
            width:20%;
            text-align: left;
        }
        .go-back{
            float:right;
            margin-right: 30px;

        }
    </style>

<script type="text/javascript">
function firstFileImg() {
		//input
		var docObj = document.getElementById("firstFile");
		//img
		var imgObjPreview = document.getElementById("firstImg");
		//div
		var divs = document.getElementById("localImag");
		if (docObj.files && docObj.files[0]) {
			//火狐下，直接设img属性
			imgObjPreview.style.width = '242px';
			imgObjPreview.style.height = '170px';
			//imgObjPreview.src = docObj.files[0].getAsDataURL();
			//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
			imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
		} else {
			//IE下，使用滤镜
			docObj.select();
			var imgSrc = document.selection.createRange().text;
			var localImagId = document.getElementById("localImag");
			//必须设置初始大小
			localImagId.style.width = "242px";
			localImagId.style.height = "170px";
			//图片异常的捕捉，防止用户修改后缀来伪造图片
			try {
				localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
				localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
			} catch(e) {
				alert("您上传的图片格式不正确，请重新选择!");
				return false;
			}
			
			imgObjPreview.style.display = 'none';
			
			document.selection.empty();
		}
		return true;
	}  

function secondFileImg() {
	//input
	var docObj = document.getElementById("secondFile");
	//img
	var imgObjPreview = document.getElementById("secondImg");
	//div
	var divs = document.getElementById("localImag");
	if (docObj.files && docObj.files[0]) {
		//火狐下，直接设img属性
		imgObjPreview.style.width = '242px';
		imgObjPreview.style.height = '170px';
		//imgObjPreview.src = docObj.files[0].getAsDataURL();
		//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
		imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
	} else {
		//IE下，使用滤镜
		docObj.select();
		var imgSrc = document.selection.createRange().text;
		var localImagId = document.getElementById("localImag");
		//必须设置初始大小
		localImagId.style.width = "242px";
		localImagId.style.height = "170px";
		//图片异常的捕捉，防止用户修改后缀来伪造图片
		try {
			localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
			localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
		} catch(e) {
			alert("您上传的图片格式不正确，请重新选择!");
			return false;
		}
		
		imgObjPreview.style.display = 'none';
		
		document.selection.empty();
	}
	return true;
}  

function thirdFileImg() {
	//input
	var docObj = document.getElementById("thirdFile");
	//img
	var imgObjPreview = document.getElementById("thirdImg");
	//div
	var divs = document.getElementById("localImag");
	if (docObj.files && docObj.files[0]) {
		//火狐下，直接设img属性
		imgObjPreview.style.width = '242px';
		imgObjPreview.style.height = '170px';
		//imgObjPreview.src = docObj.files[0].getAsDataURL();
		//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
		imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
	} else {
		//IE下，使用滤镜
		docObj.select();
		var imgSrc = document.selection.createRange().text;
		var localImagId = document.getElementById("localImag");
		//必须设置初始大小
		localImagId.style.width = "242px";
		localImagId.style.height = "170px";
		//图片异常的捕捉，防止用户修改后缀来伪造图片
		try {
			localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
			localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
		} catch(e) {
			alert("您上传的图片格式不正确，请重新选择!");
			return false;
		}
		
		imgObjPreview.style.display = 'none';
		
		document.selection.empty();
	}
	return true;
}  

$(function() {
    //初始化
        $('#validDate').datetimepicker(
				{
					language : 'zh-CN',//显示中文
					format : "yyyy-mm-dd HH:mm",
					autoclose : true,
					todayBtn : true,
					startDate : "<#if (beginTime)??></#if>",
					minuteStep : 10
				});
});

</script>    
    
</head>
<body>

<div class="list-path" > <span style="margin-left: 50px;"><span class="glyphicon glyphicon-home"></span> 奖品编辑</span></div>
    <div style="float:right;margin-right: 40px;"><a class="btn btn-info" href="${base}/awardon/czjawardonList.do?rouletteId=${czjawardon.shopId!}">返回上一级</a></div>
</div>


<div class="table-class">       
      <#if  message?? &&  message =="1" >
        <div class="alert alert-error" style="background-color: write;color: green;">           
           <font size="5"><strong>发布成功</strong></font>
        </div>
     </#if>
      <#if  message?? &&  message =="0" >
        <div class="alert alert-error" style="background-color: write;color: red;">           
           <font size="5"><strong>取消发布</strong></font>
        </div>
     </#if>
      <#if  message?? &&  message =="2" >
        <div class="alert alert-error" style="background-color: write;color: green;">           
           <font size="5"><strong>保存成功</strong></font>
        </div>
     </#if> 
   
        <div  hidden="hidden" id="message" class="alert alert-error" style="background-color: write;color: red;">           
           <font size="5"><strong>警告,这个奖品没有分配到对应的轮盘或活动!</strong></font>
        </div>         
      
    <table class="table table-bordered">
        <thead>

        </thead>
        <tbody>
          <form  action="${base}/awardon/czjawardonSave.do?awardonId=${czjawardon.awardonId!}" method="post" enctype="multipart/form-data"   id="myform" >
           
              <input type="hidden"  name="shopId" value="${czjawardon.shopId!}" >     
               <tr>
                <th>请选择奖品：</th>
                <td>
                   <select  id="thingId" name="thingId" onchange="thingIdSel(this.value);" >
                    <option value="-1">请选择</option>
                     <#list czjawardstocks as c>
                        <option value="${c.awardstockId!?html}" <#if czjawardon.thingId?? && czjawardon.thingId == c.awardstockId > selected="selected" </#if> >${c.thingName!?html}</option>
                     </#list>
                   </select>                                              
                </td>
                <th>奖品展示顺序：</th>
                <td> 
                  <input id="ext1" name="ext1" value="${czjawardon.ext1!}" >                                                                       
                </td>
              </tr>        
             <tr>
                <th>奖品概率：</th>
                <td><input type="text" id="probability" name="probability" value="${czjawardon.probability!}">   </td>
                <th></th>
                <td>
                </td>
              </tr> 
              
             <tr name="trHidden">
                <th>是否限制抽奖：</th>
                <td id="islimit" >
                  
                </td>
                <th>剩余抽奖数量：</th>
                <td id="lastNum">
                
                </td>
             </tr>
             
             <tr name="trHidden">
                <th>奖品图片：</th>
                <td>
              <img src="" height="140px;"   id="imgId"      >
                </td>
                <th></th>
                <td>
                
                </td>
             </tr>                                       
                                                                                                           
     </form>   

       <tr>
            <td colspan="4" width="100%" style="text-align: center;">

                <a class="btn btn-success  approve-btn btn-approve" href="javascript:submitVoteOrder()">&nbsp;提交&nbsp;</a>
                <span >&nbsp;</span>  
            </td>
        </tr>

          <input type="hidden" id="rouletteId" value="${czjawardon.shopId!}">
          <input type="hidden" id="basePath" value="${base}">  
        </tbody>
    </table>

</div>

<script type="text/javascript">

$(function(){ 
	var thingId = $("#thingId").val();	
	thingIdSel(thingId);
	}); 


 function thingIdSel(obj){
	   var thingId = $("#thingId").val();	
		if(thingId==-1){
			$("tr[name='trHidden']").attr("hidden",true);              
		}else{
			$("tr[name='trHidden']").attr("hidden",false); 
		}
	 var awardstockId =  obj;
	 var rouletteId = $("#rouletteId").val();
	 //图片根路径
	 var basePath = $("#basePath").val();
	 
 	    $.ajax({  
	        type : "post",  //提交方式  
	        url : "czjawardstockEdit.do",//路径  
	        async: false,
	        data : "awardstockId="+awardstockId+"&rouletteId="+rouletteId,//数据，这里使用的是Json格式进行传输      
	        dataType: "json",
	        success : function(result) {//返回数据根据结果进行相应的处理  
	       console.log(result.result);	
	        var result = result.result;
            
	        var islimit = result.islimit

	        var islimitMess ="";
	        if(islimit == 0){
	        	islimitMess ="否";
	        }else{
	        	islimitMess ="是";
	        }
	        //剩余抽奖数量        
	        $("#lastNum").text(result.lastNum);
	        //是否无限抽奖
	        $("#islimit").text(islimitMess);	       
	        //图片路径
	        var imgPath = ""+result.prizePath;
	        imgPath = basePath + imgPath;
	        $("#imgId").attr('src',imgPath); 
            //判定这个奖品有没有轮盘
	        var message = result.message;
            if(message ==0){
            	$("#message").attr("hidden",false);
            }else{
            	$("#message").attr("hidden",true);        	
            }
	        
	        }
	    });  
	    
	    
 }
   
//提交图片
function submitVoteOrder(){

	var probability = $("#probability").val();
	if (probability == "") {
		alert("概率不能为空");
		return false;
	}

	if (isNaN(probability)) {
		alert("概率只能是数字");
		return false;
	}

	var ext1 = $("#ext1").val();

	if (ext1 == "") {
		alert("奖品顺序不能为空");
		return false;
	}
	if (!isInteger(ext1)) {
		alert("奖品顺序只能是正整数");
		return false;
	}
	if (ext1 <= 0) {
		alert("奖品顺序只能是正整数");
		return false;
	}
	if (isNaN(ext1)) {
		alert("奖品顺序只能是数字");
		return false;
	}	
     document.getElementById("myform").submit();

	}

	function isInteger(obj) {
		return obj % 1 === 0
	}
	isInteger(3) // true
	isInteger(3.3) // false　
</script>

</body>
</html>